<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script src="qrcode.js">
        </script>
		<style>
			.line {
				clear: both;
			}
			.dark { 
				background-color: black;
				width:  4px;
				height: 4px;
				float: left;
			} 
			.light { 
				background-color: white;
				width: 4px;
				height:4px;
				float: left;
			}
		</style>
        <script type="text/javascript">
            // (c) Cipher Brain SPRL, 2010 by Vincent Cautaerts (email: vincent AT cipherbrain DOT be)
            function append_qrcode(typeNumber, elem_id, text){
                var cs = 4;// cell size
                var e = document.getElementById(elem_id);
                if (e) {
                    var canvas = document.createElement('canvas');
                    
                    var ctx = canvas.getContext('2d');
                    
                    var qr = new QRCode(typeNumber, QRErrorCorrectLevel.H);
                    
                    qr.addData(text);
                    
                    qr.make();
                    
                    canvas.setAttribute('width', qr.getModuleCount() * cs);
                    canvas.setAttribute('height', qr.getModuleCount() * cs);
                    e.appendChild(canvas);
                    
                    if (canvas.getContext) {
                        for (var r = 0; r < qr.getModuleCount(); r++) {
                            for (var c = 0; c < qr.getModuleCount(); c++) {
                                if (qr.isDark(r, c)) {
                                    ctx.fillStyle = "rgb(0,0,0)";
                                }
                                else {
                                    ctx.fillStyle = "rgb(255,255,255)";
                                }
                                ctx.fillRect(c * cs, r * cs, cs, cs);
                            }
                        }
                        
                    }
                }
            }
            
            function append_qrtext(typeNumber, id, msg){
                var cs = 4;// cell size
                var e = document.getElementById(id);
                if (e) {
                
                    
                    var qr = new QRCode(typeNumber, QRErrorCorrectLevel.H);
                    
                    qr.addData(msg);
                    
                    qr.make();
					
					var text = "";
                    for (var r = 0; r < qr.getModuleCount(); r++) {                 
                        var line = document.createElement('div');
						line.className = "line";
                        for (var c = 0; c < qr.getModuleCount(); c++) {
							var cell = document.createElement('div');
                            if (qr.isDark(r, c)) {
                                cell.className = "dark";
                            }
                            else {
                                cell.className = "light";
                            }             
							line.appendChild(cell);
                        }
						e.appendChild(line);
                    }
					
                }
            }
        </script>
    </head>
    <body>
        <h1>Input your message</h1>
        <form>
            <input id="msg"><input type="submit" value="Draw QRCode" onclick="draw_qrcode();return false;">
        </form><h1>QRCode</h1>
        <div id="qr_div"></div>	
		
		<br/> <br/> <br/> <br/>
		
		<div id="qr_canvas"></div>
		
		
        <script type="text/javascript">
            function draw_qrcode(){
            
                append_qrtext(4, "qr_div", document.getElementById('msg').value);
				
				append_qrcode(4, "qr_canvas", document.getElementById('msg').value);
				
            }
        </script>
    </body>
</html>
